<KoenigCard
    @icon="koenig/card-indicator-markdown"
    @class={{concat (kg-style "container-card") " koenig-card-markdown-rendered"}}
    @headerOffset={{this.headerOffset}}
    @toolbar={{this.toolbar}}
    @payload={{this.payload}}
    @isSelected={{this.isSelected}}
    @isEditing={{this.isEditing}}
    @onEnterEdit={{action "enterEditMode"}}
    @onLeaveEdit={{action "leaveEditMode"}}
    @selectCard={{action this.selectCard}}
    @deselectCard={{action this.deselectCard}}
    @editCard={{action this.editCard}}
    @saveCard={{action this.saveCard}}
    @saveAsSnippet={{this.saveAsSnippet}}
    @editor={{this.editor}}
>
    {{#if this.isEditing}}
        <GhEditor as |editor|>
            <GhScrollTrigger
                @triggerOffset={{hash bottom=this.bottomOffset}}
                @enter={{action "topEntered"}}
                @exit={{action "topExited"}}
                @registerElement={{action "registerTop"}}
            />

            <GhMarkdownEditor
                @markdown={{readonly this.payload.markdown}}
                @onChange={{action "updateMarkdown"}}
                @autofocus={{true}}
                @enableSideBySide={{false}}
                @enablePreview={{false}}
                @enableHemingway={{false}}
                @options={{hash status=false}}
                @uploadedImageUrls={{editor.uploadedImageUrls}}
                @onImageFilesSelected={{action editor.uploadImages}}
                @imageMimeTypes={{editor.imageMimeTypes}}
                as |markdown|
            >
                {{markdown.editor}}
            </GhMarkdownEditor>

            <GhScrollTrigger
                @enter={{action "bottomEntered"}}
                @exit={{action "bottomExited"}}
                @registerElement={{action "registerBottom"}}
            />

            {{!-- files are dragged over editor pane --}}
            {{#if editor.isDraggedOver}}
                <div class="drop-target gh-editor-drop-target">
                    <div class="drop-target-message">
                        <h3>Drop image(s) here to upload</h3>
                    </div>
                </div>
            {{/if}}

            {{!-- files have been dropped ready to be uploaded --}}
            {{#if editor.droppedFiles}}
                <GhUploader
                    @files={{editor.droppedFiles}}
                    @accept={{editor.imageMimeTypes}}
                    @extensions={{editor.imageExtensions}}
                    @onComplete={{action editor.uploadComplete}}
                    @onCancel={{action editor.uploadCancelled}}
                    as |upload|
                >
                    <div class="gh-editor-image-upload {{if upload.errors "-error"}}">
                        <div class="gh-editor-image-upload-content">
                            {{#if upload.errors}}
                                <h3>Upload failed</h3>

                                {{#each upload.errors as |error|}}
                                    <div class="failed">{{error.fileName}} - {{error.message}}</div>
                                {{/each}}

                                <button class="gh-btn gh-btn-grey gh-btn-icon" type="button" {{action upload.cancel}}>
                                    <span>{{svg-jar "close"}} Close</span>
                                </button>
                            {{else}}

                                <h3>Uploading {{gh-pluralize upload.files.length "image"}}...</h3>
                                {{upload.progressBar}}
                            {{/if}}
                        </div>
                    </div>
                </GhUploader>
            {{/if}}
        </GhEditor>

        {{#if this.preventClick}}
            <div class="absolute absolute--fill z-max"></div>
        {{/if}}
    {{else}}
        {{this.renderedMarkdown}}
        <div class="absolute absolute--fill z-999"></div>
    {{/if}}
</KoenigCard>